<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="icon" href="image/favicon.ico"
          mce_href="image/favicon.ico" type="image/x-icon">
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet"
          href="./zui-1.9.0/css/zui.min.css">
    <link rel="stylesheet" href="./css/demo.css">
    <title>iRouter本地监控界面</title>
    <style type="text/css">
        h1 {
            color: white;
            margin: 5px;
            font-size: 20px;
            margin-bottom: 20px;
        }

        h3 {
            color: white;
            margin: 10px 3px;
            font-size: 18px;
        }

        li {
            list-style-type: none;
        }

        .layui-layer-dialog .layui-layer-content {
            color: white
        }

        .main {
            color: #FF0000;
            margin-top: 50px;
        }

        /* 定义keyframe动画，命名为blink */
        @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            50.01% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        /* 添加兼容性前缀 */
        @-webkit-keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            50.01% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @-moz-keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            50.01% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @-ms-keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            50.01% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @-o-keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            50.01% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        /* 定义blink类*/
        .blink {
            color: #dd4814;
            animation: blink 1s linear infinite;
            /* 其它浏览器兼容性前缀 */
            -webkit-animation: blink 1s linear infinite;
            -moz-animation: blink 1s linear infinite;
            -ms-animation: blink 1s linear infinite;
            -o-animation: blink 1s linear infinite;
        }

        p {
            color: red;
            font-size: 18px;
        }

    </style>
</head>
<body style="background: rgb(27,29,40);"
      ctxPath="${ctxPath}">
<div class="container-fluid">

    <div class="row">
        <div class="col-xs-7">

            <div id="quxian"
                 style="height:540px;margin: 13px;border:1px solid #eee;padding: 15px;">
            </div>
        </div>
        <div class="col-xs-5">
            <div style="height:300px;margin: 13px;border:1px solid #eee;padding: 15px;">
                <h1 style="display: inline;">实时数据</h1>
                <h1 id="heixiazi"
                    style="display: inline;float: right;color: rgb(27,29,40);">
                    黑匣子功能演示</h1>
                <table class="table table-borderless"
                       style="table-layout: fixed;font-size: 18px;">
                    <thead>
                    <tr>
                        <th>电池堆</th>
                        <th>总电流</th>
                        <th>总电压</th>
                        <th>温度</th>
                    </tr>
                    </thead>
                    <tbody style="background-color: rgb(60, 60, 60);">
                    <tr>
                        <td>1#电池堆</td>
                        <td>4.5</td>
                        <td>22</td>
                        <td>35</td>
                    </tr>
                    <tr>
                        <td>2#电池堆</td>
                        <td>3.8</td>
                        <td>25</td>
                        <td>40</td>
                    </tr>
                    <tr>
                        <td>3#电池堆</td>
                        <td>4.1</td>
                        <td>23</td>
                        <td>33</td>
                    </tr>
                    <tr>
                        <td>4#电池堆</td>
                        <td>3.9</td>
                        <td>28</td>
                        <td>29</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div style="height:230px;margin: 13px;border:1px solid #eee;padding: 15px;">
                <h1>PCS/BMS阈值设置</h1>

                <table class="table table-borderless"
                       style="table-layout: fixed;font-size: 18px;background-color: rgb(60, 60, 60);">
                    <tr>
                        <td>SOC运行范围：</td>
                        <td>
                            <font color="red">50 % ~ 70
                                %</font>
                        </td>
                    </tr>
                    <tr>
                        <td>充放电功率：</td>
                        <td>
                            <font color="red">500 kW ~ 700
                                kW</font>
                        </td>
                    </tr>
                    <tr>
                        <td>下发时间：</td>
                        <td>
                            <font color="red" id="pushTime">${time!,dateFormat="yyyy-MM-dd HH:mm:ss"}</font>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-7">
            <div style="height:300px;margin: 13px;border:1px solid #eee;padding: 15px;">
                <h1>云端策略下发记录</h1>
                <table class="table table-borderless"
                       style="table-layout: fixed;font-size: 18px;">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>下发时间</th>
                        <th>下发策略</th>
                        <th>执行情况</th>
                    </tr>
                    </thead>
                    <tbody style="background-color: rgb(60, 60, 60);"
                           id="tbl">
                    <% for(var record in records !){%>
                    <tr>
                        <td>${recordLP.index}</td>
                        <td>
                            ${record.operateTime,dateFormat="yyyy-MM-dd HH:mm:ss"}
                        </td>
                        <td>${record.type}</td>
                        <td>${record.status}</td>
                    </tr>
                    <%}%>

                    </tbody>
                </table>
            </div>

        </div>
        <div class="col-xs-5">
            <div style="height: 300px;margin: 13px;border:1px solid #eee;padding:15px;">
                <h1>当前状态</h1>
                <ul>
                    <li>
                        <font color="red" size="5px;"
                              class="blink">变流器未连接！请检查485口</font>
                    </li>
                    <li>
                        <font color="red" size="5px;"
                              class="blink">BMS未连接！请检查CAN口</font>
                    </li>
                </ul>

                <ul  style="padding-top: 50px;width: 500px; " id="blackBoxRecord">
                    <li><font color="red" size="5px;" id="recordText"></font> &nbsp;&nbsp;
                        <btn class="btn" type="button" id="viewRecord">查看</btn><
                        /li>
                </ul>
            </div>
        </div>
    </div>
</div>


<div id="blackBoxDlg" style="display: none">
    <div class="row">
        <div class="col-xs-5">
            <div style="height:160px;margin: 13px;border:1px solid #eee;padding: 13px;">
                <h3>基本信息</h3>
                <table class="table-borderless" style="table-layout: fixed;font-size: 16px;margin: 20px;">
                    <tr>
                        <td><font color="white">事故对象：</font></td>
                        <td><font color="red">****储能电站 > 2#电池堆</font></td>

                    </tr>
                    <tr>
                        <td><font color="white">记录时间：</font></td>
                        <td><font color="red" id="recordTime"></font></td>
                    </tr>

                    <tr>
                        <td><font color="white">触发条件：</font></td>
                        <td><font color="red">温升过快（实际值：0.2℃/min，发至0.3℃/min）</font></td>

                    </tr>

                </table>
            </div>
            <div style="height:480px;margin: 13px;border:1px solid #eee;padding: 13px;">
                <h3>分析结论</h3>
                <p>
                    在xxx(黑匣子触发时间），2#电池堆温升达到1.21℃/min，超过安全阈值0.8℃/min，此时最高温度为44℃，
                    2.6min后温度达到最大值47℃，8秒后温度变化率降低到0.2℃/min，最值电压和电压极差在正常范围内；
                    可能原因是温度传感器异常或者通风管道堵塞；建议尽快进行处理。

                </p>
            </div>
        </div>


        <div class="col-xs-7">
            <div style="height:650px;margin: 13px;border:1px solid #eee;padding: 13px;">
                <h3>详细记录</h3>
                <ul>
                    <li style="color: rgb(161,161,161)"><i class="iconfont icon-shu" style="color: rgb(225,87,89)"></i>&nbsp;&nbsp;&nbsp;依据规范：GB/T 34131-2017《电化学储能电站用锂离子电池管理系统技术规范》</li>
                </ul>
                <div id="dianYa" style="width:700px;height: 180px; ">

                </div>
                <div id="dianLiu" style="width:700px;height: 180px; ">

                </div>
                <div id="wenDu" style="width:700px;height: 180px; ">

                </div>

            </div>
        </div>
    </div>

</div>


<script type="text/javascript">

</script>
<script src="./zui-1.9.0/lib/jquery-1.11.0.min.js"></script>
<script src="./zui-1.9.0/js/zui.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./echarts/echarts.min.js"></script>
<script src="./echarts/macarons.js"></script>
<script src="./js/irouter.js"></script>
</body>
</html>
